<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="来源渠道" prop="source" v-if="!isAdmin">
        <el-select
          v-model="queryParams.source"
          placeholder="请输入来源渠道"
          clearable
          class="!w-240px"
        >
          <el-option label="电话" value="1" />
          <el-option label="邮件" value="2" />
          <el-option label="系统上报" value="3" />
          <el-option label="APP" value="4" />
          <el-option label="微信" value="5" />
        </el-select>
      </el-form-item>

      <el-form-item label="当前状态" prop="status" v-if="!isAdmin">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择当前状态"
          clearable
          class="!w-240px"
        >
          <el-option label="待分配" value="1" />
          <el-option label="已分配" value="2" />
          <el-option label="处理中" value="3" />
          <el-option label="待确认" value="4" />
          <el-option label="已完成" value="5" />
          <el-option label="已关闭" value="6" />
          <el-option label="已取消" value="7" />
        </el-select>
      </el-form-item>
      <el-form-item label="分配人员" prop="assignedPersonId" v-if="!isAdmin">
        <el-select
          v-model="queryParams.assignedPersonId"
          placeholder="请选择分配人员"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="item in yunweifenpei"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="优先级" prop="priority" v-if="!isAdmin">
        <el-select
          v-model="queryParams.priority"
          placeholder="请选择优先级"
          clearable
          class="!w-240px"
        >
          <el-option label="P0" value="P0" />
          <el-option label="P1" value="P1" />
          <el-option label="P2" value="P2" />
          <el-option label="P3" value="P3" />
          <el-option label="P4" value="P4" />
        </el-select>
      </el-form-item>
      <el-form-item label="问题分类" prop="category" v-if="!isAdmin">
        <el-select
          v-model="queryParams.category"
          placeholder="请选择问题分类"
          clearable
          class="!w-240px"
        >
          <el-option label="一级分类" value="一级分类" />
          <el-option label="二级分类" value="一级分类" />
        </el-select>
      </el-form-item>

      <el-form-item label="客户名称" prop="customerName" v-if="!isAdmin">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>

      <el-form-item label="联系方式" prop="contactInfo">
        <el-input
          v-model="queryParams.contactInfo"
          placeholder="请输入联系方式"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="产品型号" prop="productModel" v-if="!isAdmin">
        <el-input
          v-model="queryParams.productModel"
          placeholder="请输入产品型号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="购买日期" prop="purchaseDate" v-if="!isAdmin">
        <el-date-picker
          v-model="queryParams.purchaseDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="保修状态" prop="warrantyStatus" v-if="!isAdmin">
        <el-select
          v-model="queryParams.warrantyStatus"
          placeholder="请选择保修状态"
          clearable
          class="!w-240px"
        >
          <el-option label="在保" value="1" />
          <el-option label="过保" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间" prop="createTime" v-if="!isAdmin">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item
        v-if="!isAdmin"
        label="保修截止日期"
        prop="warrantyExpiry"
        label-width="100"
      >
        <el-date-picker
          v-model="queryParams.warrantyExpiry"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择保修截止日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"
          ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
        >
        <el-button @click="resetQuery"
          ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
        >
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['health:robot-aftersales:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button
          v-if="!isAdmin"
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['health:robot-aftersales:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
        <el-button link type="primary" @click="okdialog">
          满意度调查
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
    >
      <el-table-column label="序号" align="center" type="index" width="60px" />

      <el-table-column
        label="分配人员"
        align="center"
        prop="assignedPerson"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="来源渠道"
        align="center"
        prop="source"
        width="100px"
        v-if="!isAdmin"
      >
        <template #default="{ row }">
          {{ getSource(row.source) }}
        </template>
      </el-table-column>
      <el-table-column
        label="机器人类型"
        align="center"
        prop="robotType"
        width="100px"
        v-if="!isAdmin"
      >
        <template #default="{ row }">
          {{ getrobotType(row.robotType) }}
        </template>
      </el-table-column>
      <el-table-column
        label="机器人编号"
        align="center"
        prop="robotCode"
        width="100px"
      />
      <el-table-column
        label="机器人名称"
        align="center"
        prop="robotName"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="当前状态"
        align="center"
        prop="status"
        width="100px"
        v-if="!isAdmin"
      >
        <template #default="{ row }">
          {{ getstatus(row.status) }}
        </template>
      </el-table-column>
      <el-table-column
        label="优先级"
        align="center"
        prop="priority"
        width="100px"
        v-if="!isAdmin"
      >
        <template #default="{ row }">
          {{ getpriority(row.priority) }}
        </template>
      </el-table-column>
      <el-table-column
        label="问题分类"
        align="center"
        prop="category"
        width="100px"
        v-if="!isAdmin"
      >
        <template #default="{ row }">
          {{ getcategory(row.category) }}
        </template>
      </el-table-column>

      <el-table-column
        label="客户名称"
        align="center"
        prop="customerName"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="联系人"
        align="center"
        prop="contactPerson"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="联系方式"
        align="center"
        prop="contactInfo"
        width="100px"
      />
      <el-table-column
        label="产品型号"
        align="center"
        prop="productModel"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="购买日期"
        align="center"
        prop="purchaseDate"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="保修状态"
        align="center"
        prop="warrantyStatus"
        width="100px"
        v-if="!isAdmin"
      >
        <template #default="{ row }">
          {{ getwarrantyStatus(row.warrantyStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        label="保修截止日期"
        align="center"
        prop="warrantyExpiry"
        width="120px"
        v-if="!isAdmin"
      />
      <el-table-column label="购买凭证" align="center">
        <template #default="{ row }">
          <img
            v-if="row.purchaseProof"
            :src="row.purchaseProof"
            style="width: 50px; height: 50px; object-fit: cover"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="延保信息"
        align="center"
        prop="extendedWarranty"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        width="100px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
        v-if="!isAdmin"
      />
      <el-table-column
        label="操作"
        align="center"
        min-width="120px"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['health:robot-aftersales:update']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['health:robot-aftersales:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <RobotAftersalesForm ref="formRef" @success="getList" />
  <el-dialog v-model="dialog" fullscreen @closa="dialogclosa">
    <!-- 添加外层容器实现居中布局 -->
    <div class="fullscreen-dialog-container">
      <el-form
        :model="form"
        ref="surveyForm"
        class="centered-form"
        label-position="top"
        :rules="rules"
      >
        <!-- 第一部分：产品验收评估 -->
        <div class="form-section">
          <h3 class="section-title">产品验收评估</h3>

          <!-- 功能完整性 -->
          <el-form-item label="功能完整性" prop="functionality">
            <div class="acceptance-item">
              <p class="acceptance-standard">
                验收标准：所有功能模块正常运行，符合产品说明要求
              </p>
              <el-radio-group v-model="form.functionality">
                <el-radio label="通过">通过</el-radio>
                <el-radio label="未通过">未通过</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>

          <!-- 性能稳定性 -->
          <el-form-item label="性能稳定性" prop="performance">
            <div class="acceptance-item">
              <p class="acceptance-standard">
                验收标准：无卡顿、崩溃或数据丢失，响应速度≤3秒
              </p>
              <el-radio-group v-model="form.performance">
                <el-radio label="通过">通过</el-radio>
                <el-radio label="未通过">未通过</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>

          <!-- 使用体验 -->
          <el-form-item label="使用体验" prop="experience">
            <div class="acceptance-item">
              <p class="acceptance-standard">
                验收标准：界面简洁、操作流畅，提示信息明确
              </p>
              <el-radio-group v-model="form.experience">
                <el-radio label="通过">通过</el-radio>
                <el-radio label="未通过">未通过</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>

          <!-- 安全性 -->
          <el-form-item label="安全性" prop="security">
            <div class="acceptance-item">
              <p class="acceptance-standard">
                验收标准：无隐私泄露风险，数据加密可靠（参考行业安全标准）
              </p>
              <el-radio-group v-model="form.security">
                <el-radio label="通过">通过</el-radio>
                <el-radio label="未通过">未通过</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>

          <!-- 文档完整性 -->
          <el-form-item label="文档完整性" prop="documentation">
            <div class="acceptance-item">
              <p class="acceptance-standard">
                验收标准：提供用户手册、保修条款及应急联系方式
              </p>
              <el-radio-group v-model="form.documentation">
                <el-radio label="通过">通过</el-radio>
                <el-radio label="未通过">未通过</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>

          <!-- 未通过说明 -->
          <el-form-item
            label="未通过说明 （请标注具体项目及问题）"
            prop="failureReason"
            class="failure-reason"
          >
            <el-input
              v-model="form.failureReason"
              type="textarea"
              :rows="3"
              placeholder="请详细说明未通过的项目及具体问题"
            />
          </el-form-item>
        </div>

        <!-- 第二部分：满意度调查 -->
        <div class="form-section">
          <h3 class="section-title">满意度调查（5=非常满意，1=非常不满意）</h3>

          <!-- 产品质量 - 功能实用性 -->
          <el-form-item label="产品质量 - 功能实用性" prop="functionUsefulness">
            <div class="satisfaction-item">
              <el-rate
                v-model="form.functionUsefulness"
                :max="5"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                show-score
                score-template="{value}分"
              />
              <el-input
                v-if="form.functionUsefulness <= 3"
                v-model="form.functionUsefulnessComment"
                type="textarea"
                :rows="2"
                placeholder="请说明原因（评分≤3分需填写）"
                class="reason-input"
              />
            </div>
          </el-form-item>

          <!-- 产品质量 - 耐用性/稳定性 -->
          <el-form-item label="产品质量 - 耐用性/稳定性" prop="durability">
            <div class="satisfaction-item">
              <el-rate
                v-model="form.durability"
                :max="5"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                show-score
                score-template="{value}分"
              />
              <el-input
                v-if="form.durability <= 3"
                v-model="form.durabilityComment"
                type="textarea"
                :rows="2"
                placeholder="请说明原因（评分≤3分需填写）"
                class="reason-input"
              />
            </div>
          </el-form-item>

          <!-- 服务体验 - 售前咨询专业性 -->
          <el-form-item label="服务体验 - 售前咨询专业性" prop="preSales">
            <div class="satisfaction-item">
              <el-rate
                v-model="form.preSales"
                :max="5"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                show-score
                score-template="{value}分"
              />
              <el-input
                v-if="form.preSales <= 3"
                v-model="form.preSalesComment"
                type="textarea"
                :rows="2"
                placeholder="请说明原因（评分≤3分需填写）"
                class="reason-input"
              />
            </div>
          </el-form-item>

          <!-- 服务体验 - 售后响应速度 -->
          <el-form-item label="服务体验 - 售后响应速度" prop="afterSales">
            <div class="satisfaction-item">
              <el-rate
                v-model="form.afterSales"
                :max="5"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                show-score
                score-template="{value}分"
              />
              <el-input
                v-if="form.afterSales <= 3"
                v-model="form.afterSalesComment"
                type="textarea"
                :rows="2"
                placeholder="请说明原因（评分≤3分需填写）"
                class="reason-input"
              />
            </div>
          </el-form-item>

          <!-- 性价比 -->
          <el-form-item label="性价比" prop="valueForMoney">
            <div class="satisfaction-item">
              <el-rate
                v-model="form.valueForMoney"
                :max="5"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                show-score
                score-template="{value}分"
              />
              <el-input
                v-if="form.valueForMoney <= 3"
                v-model="form.valueForMoneyComment"
                type="textarea"
                :rows="2"
                placeholder="请说明原因（评分≤3分需填写）"
                class="reason-input"
              />
            </div>
          </el-form-item>

          <!-- 品牌忠诚度 - 重复购买意愿 -->
          <el-form-item label="品牌忠诚度 - 重复购买意愿" prop="repurchase">
            <div class="satisfaction-item">
              <el-rate
                v-model="form.repurchase"
                :max="5"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                show-score
                score-template="{value}分"
              />
              <el-input
                v-if="form.repurchase <= 3"
                v-model="form.repurchaseComment"
                type="textarea"
                :rows="2"
                placeholder="请说明原因（评分≤3分需填写）"
                class="reason-input"
              />
            </div>
          </el-form-item>
        </div>

        <!-- 第三部分：补充调查 -->
        <div class="form-section">
          <h3 class="section-title">补充调查</h3>

          <!-- 总体满意度 -->
          <el-form-item label="总体满意度" prop="overallSatisfaction">
            <el-rate
              v-model="form.overallSatisfaction"
              :max="5"
              show-score
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            />
          </el-form-item>

          <!-- 是否再次使用 -->
          <el-form-item label="是否再次使用" prop="reuse">
            <el-radio-group v-model="form.reuse">
              <el-radio label="yes">是</el-radio>
              <el-radio label="no">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 改进建议 -->
          <el-form-item label="改进建议" prop="suggestions">
            <el-checkbox-group v-model="form.suggestions">
              <el-checkbox label="界面优化">界面优化</el-checkbox>
              <el-checkbox label="提高速度">提高速度</el-checkbox>
              <el-checkbox label="增加功能">增加功能</el-checkbox>
              <el-checkbox label="价格调整">价格调整</el-checkbox>
              <el-checkbox label="服务改进">服务改进</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 详细意见 -->
          <el-form-item label="其他建议" prop="comments">
            <el-input
              v-model="form.comments"
              type="textarea"
              :rows="5"
              placeholder="请分享您的其他建议或使用体验"
            />
          </el-form-item>
        </div>

        <el-form-item class="submit-btn-container">
          <el-button type="primary" @click="submitSurvey" size="large"
            >提交评估</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { dateFormatter } from "@/utils/formatTime";
import download from "@/utils/download";
import {
  RobotAftersalesApi,
  RobotAftersalesVO,
} from "@/api/health/robotaftersales";
import RobotAftersalesForm from "./RobotAftersalesForm.vue";
import { useUserStoreWithOut } from "@/store/modules/user";
const userStore = useUserStoreWithOut(); // 用户信息缓存
// 转换函数（包含映射关系）
const getSource = (source) => {
  const sourceMap = {
    1: "电话",
    2: "邮件",
    3: "系统上报",
    4: "APP",
    5: "微信",
  };
  return sourceMap[source] || "";
};
const getpriority = (source) => {
  const sourceMap = {
    P0: "P0",
    P1: "P1",
    P2: "P2",
    P3: "P3",
    P4: "P4",
  };
  return sourceMap[source] || "";
};

const getstatus = (row) => {
  const sourceMap = {
    1: "待分配",
    2: "已分配",
    3: "处理中",
    4: "待确认",
    5: "已完成",
    6: "已关闭",
    7: "已取消",
  };
  return sourceMap[row] || "";
};
const getrobotType = (row) => {
  const sourceMap = {
    1: "智能盘点机器人",
    2: "智能还书系统",
    3: "智能导览机器人",
  };
  return sourceMap[row] || "";
};
const getcategory = (source) => {
  const sourceMap = {
    一级分类: "一级分类",
    二级分类: "二级分类",
  };
  return sourceMap[source] || "";
};

const getwarrantyStatus = (warrantyStatus) => {
  const warrantyStatusMap = {
    1: "在保",
    2: "过保",
  };
  return warrantyStatusMap[warrantyStatus] || "";
};

/** 售后工单 列表 */
defineOptions({ name: "RobotAftersales" });

const message = useMessage(); // 消息弹窗
const { t } = useI18n(); // 国际化

const loading = ref(true); // 列表的加载中
const list = ref<RobotAftersalesVO[]>([]); // 列表的数据
const total = ref(0); // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  libraryId: undefined,
  assignedPersonId: undefined,
  assignedPerson: undefined,
  source: undefined,
  robotType: undefined,
  robotId: undefined,
  robotCode: undefined,
  robotName: undefined,
  status: undefined,
  priority: undefined,
  category: undefined,
  description: undefined,
  customerId: undefined,
  customerName: undefined,
  contactPerson: undefined,
  contactInfo: undefined,
  productModel: undefined,
  purchaseDate: [],
  warrantyStatus: undefined,
  warrantyExpiry: undefined,
  purchaseProof: undefined,
  extendedWarranty: undefined,
  createTime: [],
});
const queryFormRef = ref(); // 搜索的表单
const exportLoading = ref(false); // 导出的加载中
const yunweifenpei = ref([] as any);
/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    const data = await RobotAftersalesApi.getRobotAftersalesPage(queryParams);

    const renyuanList = await RobotAftersalesApi.getRobotAfterslist();
    list.value = data.list;
    console.log(renyuanList, "renyuanList");
    console.log(list.value, "list.value");
    yunweifenpei.value = renyuanList;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

/** 添加/修改操作 */
const formRef = ref();
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id);
};

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm();
    // 发起删除
    await RobotAftersalesApi.deleteRobotAftersales(id);
    message.success(t("common.delSuccess"));
    // 刷新列表
    await getList();
  } catch {}
};

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm();
    // 发起导出
    exportLoading.value = true;
    const data = await RobotAftersalesApi.exportRobotAftersales(queryParams);
    download.excel(data, "售后工单.xls");
  } catch {
  } finally {
    exportLoading.value = false;
  }
};

/** 初始化 **/
onMounted(() => {
  getList();
  console.log(userStore.roles);
});
// 判断多个角色
// const hasRole = (roles) => {
//   return roles.some(role => userStore.roles.includes(role))
// }
const isAdmin = computed(() => userStore.roles.includes("ke_hu"));
// 表单数据结构
const form = ref({
  functionality: "",
  performance: "",
  experience: "",
  security: "",
  documentation: "",
  failureReason: "",
  functionUsefulness: 0,
  functionUsefulnessComment: "",
  durability: 0,
  durabilityComment: "",
  preSales: 0,
  preSalesComment: "",
  afterSales: 0,
  afterSalesComment: "",
  valueForMoney: 0,
  valueForMoneyComment: "",
  repurchase: 0,
  repurchaseComment: "",
  overallSatisfaction: 0,
  reuse: "",
  suggestions: [],
  comments: "",
} as any);
const rules = reactive({
  // 验收部分规则
  functionality: [
    { required: true, message: "请选择功能完整性评估", trigger: "change" },
  ],
  performance: [
    { required: true, message: "请选择性能稳定性评估", trigger: "change" },
  ],
  experience: [
    { required: true, message: "请选择使用体验评估", trigger: "change" },
  ],
  security: [
    { required: true, message: "请选择安全性评估", trigger: "change" },
  ],
  documentation: [
    { required: true, message: "请选择文档完整性评估", trigger: "change" },
  ],

  // 满意度部分规则
  /* 在 rules 里把下面 6 条替换/追加进去 */
  functionUsefulness: [
    { required: true, message: "请对功能实用性进行评分", trigger: "change" },
    {
      type: "number",
      min: 1,
      max: 5,
      message: "",
      trigger: "change",
    },
  ],
  durability: [
    { required: true, message: "请对耐用性/稳定性进行评分", trigger: "change" },
    {
      type: "number",
      min: 1,
      max: 5,
      message: "",
      trigger: "change",
    },
  ],
  preSales: [
    {
      required: true,
      message: "请对售前咨询专业性进行评分",
      trigger: "change",
    },
    {
      type: "number",
      min: 1,
      max: 5,
      message: "",
      trigger: "change",
    },
  ],
  afterSales: [
    { required: true, message: "请对售后响应速度进行评分", trigger: "change" },
    {
      type: "number",
      min: 1,
      max: 5,
      message: "",
      trigger: "change",
    },
  ],
  valueForMoney: [
    { required: true, message: "请对性价比进行评分", trigger: "change" },
    {
      type: "number",
      min: 1,
      max: 5,
      message: "",
      trigger: "change",
    },
  ],
  repurchase: [
    { required: true, message: "请对重复购买意愿进行评分", trigger: "change" },
    {
      type: "number",
      min: 1,
      max: 5,
      message: "",
      trigger: "change",
    },
  ],
  // 补充调查部分规则
  overallSatisfaction: [
    { required: true, message: "请选择总体满意度", trigger: "change" },
  ],
  reuse: [{ required: true, message: "请选择是否再次使用", trigger: "change" }],
  // suggestions: [
  //   {
  //     type: "array",
  //     required: true,
  //     message: "请至少选择一项改进建议",
  //     trigger: "change",
  //   },
  // ],
  commentRules: [
    { required: true, message: "请填写评分原因", trigger: "blur" },
  ],
});
const dialog = ref(false);
const dialogclosa = () => {
  dialog.value = false;
  form.value = {};
};
const okdialog = () => {
  dialog.value = true;
  surveyForm.value.resetFields();
};

const surveyForm = ref();
// 提交调查
const submitSurvey = () => {
  surveyForm.value.validate(async (valid: any) => {
    if (valid) {
      const postData = {
        ...form.value,
        suggestions: form.value.suggestions.join(","), // 转为字符串
      };
      await RobotAftersalesApi.createRobotsurvey(postData);

      form.value = {
        functionality: "",
        performance: "",
        experience: "",
        security: "",
        documentation: "",
        failureReason: "",
        functionUsefulness: 0,
        functionUsefulnessComment: "",
        durability: 0,
        durabilityComment: "",
        preSales: 0,
        preSalesComment: "",
        afterSales: 0,
        afterSalesComment: "",
        valueForMoney: 0,
        valueForMoneyComment: "",
        repurchase: 0,
        repurchaseComment: "",

        overallSatisfaction: 0,
        reuse: "",
        suggestions: "",
        comments: "",
      };

      ElMessage.success("提交成功！");
      surveyForm.value.resetFields();
      dialog.value = false;
    }
  });
};
</script>
<style scoped>
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* 全屏容器样式 */
.fullscreen-dialog-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
}
</style>
